import React  from 'react';
import PropTypes from 'proptypes';

import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
export default function PromptModal (props){
  const [state,setState]=React.useState({modalOpen:false});
  const handleKeyPress=(event)=> {
    if (event.key === 'Enter') {
      props.onOKClick(state.value);
    }
  }

  const handleChange=(event)=> {
    setState({ value: event.target.value });
  }

    const { title, message, type } = props;

    return (
      <Dialog
        closable={false}
        detachable={false}
        onDeny={() => {
          props.onCancelClick();
          return true;
        }}
        onApprove={() => {
          props.onOKClick(state.value);
          return true;
        }}
        open={state.modalOpen}
        onClose={handleClose}
        basic
        size="small"
      >
        {!!state.showDatabaseDiagram && <DialogTitle>{title}</DialogTitle>}
        <DialogContent>
          {message}
          <div className="ui fluid icon input">
            <input
              onChange={handleChange}
              type={type}
              onKeyPress={handleKeyPress}
            />
          </div>
        </DialogContent>
        <DialogActions>
          <div
            className="small ui black deny right labeled icon button"
            tabIndex={0}
          >
            Cancel
            <i className="ban icon" />
          </div>
          <div
            className="small ui positive right labeled icon button"
            tabIndex={0}
          >
            OK
            <i className="checkmark icon" />
          </div>
        </DialogActions>
      </Dialog>
    );
}
